<template>
    <div class="question_chart" ref="schemeType"></div>
</template>
<script>
import resize from '@/mixins/resize';
import echarts from 'echarts';
// import {remoteQuestionStatistics} from '@/api/home'

export default {
    name: 'SchemeType',
    mixins: [resize],
    props: {
        list: {
            type: Array,
            default: () => []
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.initEchart();
        });
    },
    methods: {
        async initEchart() {
            let list = this.list;
            let colors = [
                {
                    color: '#4499E4'
                    // borderColor: 'rgba(50,123,250,1)',
                },
                {
                    color: '#00BB96'
                    // borderColor: 'rgba(244,201,7,1)',
                },
                {
                    color: '#FAC858'
                    // borderColor: 'rgba(23,216,161,1)',
                },
                {
                    color: '#EF6666'
                    // borderColor: 'rgba(122,60,235,1)',
                },
                {
                    color: 'rgba(15,197,243,0.7)'
                    // borderColor: 'rgba(15,197,243,1)',
                },
                {
                    color: 'rgba(240,128,128,0.7)',
                    borderColor: 'rgba(240,128,128,1)'
                }
            ];
            let showData = [];
            list.map((item, index) => {
                let { type, count } = item;
                showData.push({
                    value: count,
                    name: type,
                    itemStyle: {
                        color: colors[index].color,
                        borderColor: colors[index].borderColor,
                        borderWidth: 2
                    }
                });
            });
            this.myChart = echarts.init(this.$refs.schemeType);

            this.myChart.setOption(
                {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    title: {
                        text: '施工类型',
                        left: 'center',
                        bottom:"15%",
                        textStyle: {
                            fontSize: 12,
                            color: '#17E2EF'
                        },
                    },
                    grid: {
                        left: 0,
                        right: 0,
                        top: 0,
                        bottom: 0,
                        containLabel: true
                    },
                    legend: {
                        bottom: '25%',
                        left: 'center',
                        itemHeight: 4,
                        itemWidth: 7,
                        itemGap: 5,
                        textStyle: {
                            fontSize: 8,
                            color: '#fff'
                        },
                        selectedMode: false
                    },
                    series: [
                        {
                            name: '施工类型',
                            type: 'pie',
                            radius: '50%',
                            center: ['50%', '40%'],
                            data: showData,
                            label: {
                                show: true,
                                textStyle: {
                                    fontSize: 8,
                                }
                            },
                            labelLine:{
                                normal:{
                                    length:2,
                                    length2:0,
                                }
                            },
                        }
                    ]
                },
                true
            );
        }
    }
};
</script>
<style lang="scss" scoped>
.question_chart {
    width: 100%;
    height: 100%;
}
</style>
